<!-- /templates/customers/addressess.liquid -->
{% comment %}

  Template note:
    - There are separate 'add new' and 'edit' address forms

{% endcomment %}

{% paginate customer.addresses by 5 %}

<div class="page-width page-container">
  <header class="section-header">
    <h1>{{ 'customer.account.title' | t }}</h1>
    <p>
      <button type="button" class="btn address-new-toggle">{{ 'customer.addresses.add_new' | t }}</button>
    </p>
    <p><a href="{{ routes.account_url }}">{{ 'customer.account.return' | t }}</a></p>
  </header>

  {% comment %}
    Add address form, hidden by default
  {% endcomment %}
  <div id="AddressNewForm" class="form-vertical hide">
    {% form 'customer_address', customer.new_address %}

      <h2>{{ 'customer.addresses.add_new' | t }}</h2>

      <div class="grid">

        <div class="grid__item medium-up--one-half">
          <label for="AddressFirstNameNew">{{ 'customer.addresses.first_name' | t }}</label>
          <input type="text" id="AddressFirstNameNew" class="input-full" name="address[first_name]" value="{{ form.first_name }}" autocapitalize="words"/>
        </div>

        <div class="grid__item medium-up--one-half">
          <label for="AddressLastNameNew">{{ 'customer.addresses.last_name' | t }}</label>
          <input type="text" id="AddressLastNameNew" class="input-full" name="address[last_name]" value="{{ form.last_name }}" autocapitalize="words"/>
        </div>

      </div>

      <label for="AddressCompanyNew">{{ 'customer.addresses.company' | t }}</label>
      <input type="text" id="AddressCompanyNew" class="input-full" name="address[company]" value="{{ form.company }}" autocapitalize="words"/>

      <label for="AddressAddress1New">{{ 'customer.addresses.address1' | t }}</label>
      <input type="text" id="AddressAddress1New" class="input-full" name="address[address1]" value="{{ form.address1 }}" autocapitalize="words"/>

      <label for="AddressAddress2New">{{ 'customer.addresses.address2' | t }}</label>
      <input type="text" id="AddressAddress2New" class="input-full" name="address[address2]" value="{{ form.address2 }}" autocapitalize="words"/>

      <div class="grid">
        <div class="grid__item medium-up--one-half">
          <label for="AddressCityNew">{{ 'customer.addresses.city' | t }}</label>
          <input type="text" id="AddressCityNew" class="input-full" name="address[city]" value="{{ form.city }}" autocapitalize="words"/>
        </div>

        <div class="grid__item medium-up--one-half">
          <label for="AddressCountryNew">{{ 'customer.addresses.country' | t }}</label>
          <select id="AddressCountryNew" class="input-full" name="address[country]" data-default="{{ form.country }}">{{ all_country_option_tags }}</select>
        </div>

        <div class="grid__item" id="AddressProvinceContainerNew" style="display:none">
          <label for="AddressProvinceNew">{{ 'customer.addresses.province' | t }}</label>
          <select id="AddressProvinceNew" class="input-full" name="address[province]" data-default="{{ form.province }}"></select>
        </div>

        <div class="grid__item medium-up--one-half">
          <label for="AddressZipNew">{{ 'customer.addresses.zip' | t }}</label>
          <input type="text" id="AddressZipNew" class="input-full" name="address[zip]" value="{{ form.zip }}" autocapitalize="characters"/>
        </div>

        <div class="grid__item medium-up--one-half">
          <label for="AddressPhoneNew">{{ 'customer.addresses.phone' | t }}</label>
          <input type="tel" id="AddressPhoneNew" class="input-full" name="address[phone]" value="{{ form.phone }}"/>
        </div>
      </div>

      <p>
        {{ form.set_as_default_checkbox }}
        <label for="address_default_address_new" class="inline">{{ 'customer.addresses.set_default' | t }}</label>
      </p>

      <input type="submit" class="btn" value="{{ 'customer.addresses.add' | t }}"/>
      <p><button type="button" class="btn--link address-new-toggle">{{ 'customer.addresses.cancel' | t }}</button></p>
    {% endform %}
  </div>

  <h2>{{ 'customer.addresses.title' | t }}</h2>

  {% comment %}
    List all customer addresses with a unique edit form.
    Also add pagination in case they have a large number of addresses
  {% endcomment %}
  <div class="grid">
    {% for address in customer.addresses %}
      <div class="grid__item medium-up--one-half">
        <p class="h4">
          {% if address == customer.default_address %}({{ 'customer.addresses.default' | t }}){% endif %}
        </p>

        {{ address | format_address }}

        <p>
          <button type="button" class="btn--link address-edit-toggle" data-form-id="{{ address.id }}">{{ 'customer.addresses.edit' | t }}</button>
          <button type="button" class="btn--link address-delete" data-form-id="{{ address.id }}" data-confirm-message="{{ 'customer.addresses.delete_confirm' | t }}">{{ 'customer.addresses.delete' | t }}</button>
        </p>
      </div>
    {% endfor %}
  </div>

  {% for address in customer.addresses %}
    <div id="EditAddress_{{ address.id }}" class="form-vertical hide">
      {% form 'customer_address', address %}

        <h4>{{ 'customer.addresses.edit_address' | t }}</h4>

        <div class="grid">
          <div class="grid__item medium-up--one-half">
            <label for="AddressFirstName_{{ form.id }}">{{ 'customer.addresses.first_name' | t }}</label>
            <input type="text" id="AddressFirstName_{{ form.id }}" class="input-full" name="address[first_name]" value="{{ form.first_name }}" autocapitalize="words"/>
          </div>

          <div class="grid__item medium-up--one-half">
            <label for="AddressLastName_{{ form.id }}">{{ 'customer.addresses.last_name' | t }}</label>
            <input type="text" id="AddressLastName_{{ form.id }}" class="input-full" name="address[last_name]" value="{{ form.last_name }}" autocapitalize="words"/>
          </div>
        </div>

        <label for="AddressCompany_{{ form.id }}">{{ 'customer.addresses.company' | t }}</label>
        <input type="text" id="AddressCompany_{{ form.id }}" class="input-full" name="address[company]" value="{{ form.company }}" autocapitalize="words"/>

        <label for="AddressAddress1_{{ form.id }}">{{ 'customer.addresses.address1' | t }}</label>
        <input type="text" id="AddressAddress1_{{ form.id }}" class="input-full" name="address[address1]" value="{{ form.address1 }}" autocapitalize="words"/>

        <label for="AddressAddress2_{{ form.id }}">{{ 'customer.addresses.address2' | t }}</label>
        <input type="text" id="AddressAddress2_{{ form.id }}" class="input-full" name="address[address2]" value="{{ form.address2 }}" autocapitalize="words"/>

        <div class="grid">
          <div class="grid__item medium-up--one-half">
            <label for="AddressCity_{{ form.id }}">{{ 'customer.addresses.city' | t }}</label>
            <input type="text" id="AddressCity_{{ form.id }}" class="input-full" name="address[city]" value="{{ form.city }}" autocapitalize="words"/>
          </div>

          <div class="grid__item medium-up--one-half">
            <label for="AddressCountry_{{ form.id }}">{{ 'customer.addresses.country' | t }}</label>
            <select id="AddressCountry_{{ form.id }}" class="address-country-option input-full" data-form-id="{{ form.id }}" name="address[country]" data-default="{{ form.country }}">{{ all_country_option_tags }}</select>
          </div>

          <div class="grid__item">
            <div id="AddressProvinceContainer_{{ form.id }}" style="display:none">
              <label for="AddressProvince_{{ form.id }}">{{ 'customer.addresses.province' | t }}</label>
              <select id="AddressProvince_{{ form.id }}" class="input-full" name="address[province]" data-default="{{ form.province }}"></select>
            </div>
          </div>

          <div class="grid__item medium-up--one-half">
            <label for="AddressZip_{{ form.id }}">{{ 'customer.addresses.zip' | t }}</label>
            <input type="text" id="AddressZip_{{ form.id }}" class="input-full" name="address[zip]" value="{{ form.zip }}" autocapitalize="characters"/>
          </div>

          <div class="grid__item medium-up--one-half">
            <label for="AddressPhone_{{ form.id }}">{{ 'customer.addresses.phone' | t }}</label>
            <input type="tel" id="AddressPhone_{{ form.id }}" class="input-full" name="address[phone]" value="{{ form.phone }}"/>
          </div>
        </div>

        <p>
          {{ form.set_as_default_checkbox }}
          <label for="address_default_address_{{ form.id }}" class="inline">{{ 'customer.addresses.set_default' | t }}</label>
        </p>

        <input type="submit" class="btn" value="{{ 'customer.addresses.update' | t }}"/>
        <p><button type="button" class="btn--link address-edit-toggle" data-form-id="{{ form.id }}">{{ 'customer.addresses.cancel' | t }}</button></p>
      {% endform %}
    </div>
  {% endfor %}

  {% if paginate.pages > 1 %}
    {% include 'pagination' %}
  {% endif %}
</div>
{% endpaginate %}
